<template>
  <div class="checkWaybill">
    <span class="carloadStyle" v-if="form.is_carload == 1">运输方式 : 整车</span>
    <!-- v-if="Object.keys(form).length > 0" -->
    <el-form v-if="Object.keys(form).length > 0" class="fromArea" :model="form" :rules="rules" ref="ruleForm"
      label-width="120px">
      <el-form-item label="运单ID">
        <el-input readonly :value="form.add_id + '-' + form.yund_id" placeholder="运单ID"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.beizhu" placeholder="备注"></el-input>
      </el-form-item>
      <el-form-item label="发货重量(吨)">
        <el-input v-model="form.kg" placeholder="发货重量"></el-input>
      </el-form-item>
      <el-form-item label="收货重量(吨)" prop="shkg">
        <!-- <el-input class="colorRed" v-model="form.shkg" placeholder="收货重量"></el-input> -->
        <el-input-number class="colorRed" v-model="form.shkg" :precision="4" placeholder="收货重量" :step="0.0001" ></el-input-number>
      </el-form-item>
      <el-form-item label="运费单价(元)" prop="unit_price">
        <el-input class="colorRed" v-model="form.unit_price" placeholder="运费单价"></el-input>
      </el-form-item>
      <el-form-item label="总运费(元)" prop="zyf">
        <el-input class="colorRed" v-model="form.zyf" placeholder="总运费"></el-input>
      </el-form-item>
      <el-form-item label="预支付运费(元)">
        <el-input readonly class="colorRed" v-model="form.pay_money" placeholder="总运费"></el-input>
      </el-form-item>
      <el-form-item label="运费增补(元)">
        <el-input readonly class="colorRed" v-model="form.yfzb" placeholder="运费增补"></el-input>
      </el-form-item>
      <el-form-item label="运费扣减(元)">
        <el-input readonly class="colorRed"  v-model="form.yfkj" placeholder="运费扣减"></el-input>
      </el-form-item>
      <el-form-item label="应扣油气成本(元)">
        <el-input class="colorRed" v-model="form.oil_money" placeholder="应扣油气成本"></el-input>
      </el-form-item>
      <el-form-item label="增减原因">
        <el-input v-model="form.zbyy" placeholder="增减原因"></el-input>
      </el-form-item>

      <el-form-item label="货品名称">
        <el-input v-model="form.goods" placeholder="备注"></el-input>
      </el-form-item>

      <el-form-item label="货物单价(元)">
        <el-input readonly v-model="form.danjia" placeholder="运费单价"></el-input>
      </el-form-item>
      <el-form-item label="收货人名称">
        <el-input readonly v-model="form.company_name" placeholder="收货人名称"></el-input>
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input readonly v-model="form.cph" placeholder="车牌号"></el-input>
      </el-form-item>
      <!-- <el-form-item label="合理亏损(吨)">
        <el-input v-model="form.hlks" placeholder="合理亏损"></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="亏损重量(吨)">
        <el-input readonly v-model="form.kszl" placeholder="亏损重量"></el-input>
      </el-form-item> -->
      <el-form-item label="吨差(吨)">
        <el-input readonly v-model="duncha" placeholder="亏损重量">
          <template slot="prepend">
            <span v-if="symbolDuncha" style="color:green;font-weight: 600;">涨吨</span>
            <span v-else style="color:red;font-weight: 600;">亏损</span>
          </template>
          <template slot="append">
            吨
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="装车费" v-if="form.is_cost == 1">
        <el-input v-model="form.loading_charge" placeholder="装车费" readonly></el-input>
      </el-form-item>
      <el-form-item label="卸车费" v-if="form.is_cost == 1">
        <el-input v-model="form.unloading_charge" placeholder="卸车费" readonly></el-input>
      </el-form-item>
      <el-form-item label="保险费" v-if="form.is_cost == 1">
        <el-input v-model="form.insurance_expense" placeholder="保险费" readonly></el-input>
      </el-form-item>
      <el-form-item label="信息费" v-if="form.is_cost == 1">
        <el-input v-model="form.information_cost" placeholder="信息费" readonly></el-input>
      </el-form-item>
      <el-form-item label="押金" v-if="form.is_cost == 1">
        <el-input v-model="form.deposit_charge" placeholder="押金" readonly></el-input>
      </el-form-item>

      <el-form-item label="备注" style="visibility: hidden;"  v-if="form.is_cost == 1">
        <el-input placeholder="备注"></el-input>
      </el-form-item>

      <el-form-item label="备注" style="visibility: hidden;"  v-if="form.is_oil == 1">
        <el-input placeholder="备注"></el-input>
      </el-form-item>
      
      <el-form-item label="备注" style="visibility: hidden;"  v-if="form.is_oil == 1">
        <el-input placeholder="备注"></el-input>
      </el-form-item>
      
      <el-form-item label="发货单">
        <el-image style="width: 40%;height: 100px;" :src="form.fhd" fit="fit" :preview-src-list="[form.fhd]"></el-image>
        <div class="imgTool">
          <el-upload class="upload-demo" :action="uploadUrl" :headers="getHeader()" :show-file-list="false"
            :on-success="(res, file) => handleAvatarSuccess(res, file, 'fhd')" :limit="1">
            <el-button size="small" type="primary">上传图片</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>

          <!-- <el-button class="btn" size="mini">上传图片</el-button> -->
          <span class="t1">*建议上传 600*410 像素的图片</span>
        </div>
      </el-form-item>
      <el-form-item label="收货单">
        <el-image style="width: 40%;height: 100px;" :src="form.shd" fit="fit" :preview-src-list="[form.shd]"></el-image>
        <div class="imgTool">
          <el-upload class="upload-demo" :action="uploadUrl" :headers="getHeader()" :show-file-list="false"
            :on-success="(res, file) => handleAvatarSuccess(res, file, 'shd')" :limit="1">
            <el-button size="small" type="primary">上传图片</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
          <!-- <el-button class="btn" size="mini">上传图片</el-button> -->
          <span class="t1">*建议上传 600*410 像素的图片</span>
        </div>
      </el-form-item>

      <el-form-item label="卸货图">
        <el-image style="width: 40%;height: 100px;" :src="form.xh_img" fit="fit"
          :preview-src-list="[form.xh_img]"></el-image>
        <div class="imgTool">
          <el-upload class="upload-demo" :action="uploadUrl" :headers="getHeader()" :show-file-list="false"
            :on-success="(res, file) => handleAvatarSuccess(res, file, 'xh')" :limit="1">
            <el-button size="small" type="primary">上传图片</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
          <!-- <el-button class="btn" size="mini">上传图片</el-button> -->
          <span class="t1">*建议上传 600*410 像素的图片</span>
        </div>
      </el-form-item>
      <el-form-item class="toolBtn">
        <el-button class="btn" type="primary" @click="verify">审核运单</el-button>
        <!-- <el-button class="btn" type="primary" @click="onSubmit">中原大户</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { uploadUrl, getHeader } from "@/utils/tool";
import { verifyWaybill } from "@/api/businessUser/waybill";
import Big from "big.js";
export default {
  name: "checkWaybill",
  props: {
    billDetail: {
      type: Object,
      default: {}
    }
  },
  data() {
    var validate_shkg = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        if (!isNaN(value) && value != '') {
          // if (!(/^\d+(\.\d{0,2})?$/.test(value))) {
          //   this.form.shkg = value.substring(0, value.length - 1);
          //   callback();
          //   return;
          // }
          let price = new Big(this.form.unit_price);//单价
          let shkg = new Big(value);//收货重量
          //输入的是数字的话 同步更新到实结金额
          let zongjia = price.times(shkg).toNumber();
          if(this.form.is_carload == 1){
            //整车不进行总运费计算
            callback();
            return;
          }
          if(this.form.is_cost == 1){
            // this.form.zyf = (
            //   zongjia 
            //     - Number(this.form.pay_money) 
            //     - Number(this.form.loading_charge)
            //     - Number(this.form.unloading_charge)
            //     - Number(this.form.insurance_expense)
            //     - Number(this.form.information_cost)
            //     - Number(this.form.deposit_charge)
            //     ).toFixed(2);
            this.form.zyf = zongjia.toFixed(2);

          }else{
            this.form.zyf = zongjia.toFixed(2);
          }
          

          let duncha = (value - this.form.kg).toFixed(2);
          if (duncha >= 0) {
            this.symbolDuncha = true;
          } else {
            this.symbolDuncha = false;
          }
          this.duncha = Math.abs(duncha);
          this.form.kszl = duncha;

          // this.form.real_money = zongjia;
          // this.moneyCompute(zongjia);
        } else {
          this.form.real_money = '0';
        }
        callback();
      }
    };
    var validate_yfdj = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        if (!isNaN(value)) {
          if (!(/^\d+(\.\d{0,2})?$/.test(value))) {
            this.form.yfdj = value.substring(0, value.length - 1);
            callback();
            return;
          }

          let shkg = new Big(this.form.shkg);//收货重量
          let price = new Big(value);//单价
          //输入的是数字的话 同步更新到实结金额
          let zongjia = price.times(shkg).toNumber();
          // this.form.real_money = zongjia;
          if(this.form.is_carload == 1){
            //整车不进行总运费计算
            callback();
            return;
          }
          if(this.form.is_cost == 1){
            this.form.zyf = (
              zongjia 
                - Number(this.form.pay_money) 
                - Number(this.form.loading_charge)
                - Number(this.form.unloading_charge)
                - Number(this.form.insurance_expense)
                - Number(this.form.information_cost)
                - Number(this.form.deposit_charge)
                ).toFixed(2);
          }else{
            this.form.zyf = zongjia.toFixed(2);
          }
          // this.moneyCompute(zongjia);
        } else {
          this.form.unit_price = '0';
        }
        callback();
      }
    };
    var validate_zyf = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        if (!isNaN(value)) {
          //输入的是数字的话 同步更新到实结金额
          if (Number(this.form.pay_money) >= Number(value)) {
            this.$message.error('总运费不得低于预支付运费!');
            callback();
          }
          if (!(/^\d+(\.\d{0,2})?$/.test(value))) {
            this.form.zyf = value.substring(0, value.length - 1);
          }
          // this.form.zyf = value;
          this.moneyCompute(value);
        } else {
          this.form.zyf = '0';
        }
        callback();
      }
    };
    var validate_removePoint = (rule, value, callback) => {
      if (value === "") {
        this.form[rule.field] = '0'
        callback();
      } else {
        if (!isNaN(value)) {
          if ((value + '').charAt(value.length - 1) === '.') {//如果是20.替换成20
            this.form[rule.field] = value.replace('.', '');
          }
          if (/^0+/.test(value)) {//如果是0000.1替换成0.1
            this.form[rule.field] = value.replace(/^0+/, '0');
          }

          if (/^0+(?!0)(\d+(\.\d+)?)?$/.test(value)) {//如果是0002.1替换成2.1
            this.form[rule.field] = value.replace(/^0+/, '');
          }
        }
        callback();
      }
    };
    return {
      initialZYF: 0, //初始总运费
      uploadUrl,
      getHeader,
      form: {},
      rules: {
        shkg: [{ validator: validate_shkg, trigger: "change" }, { validator: validate_removePoint, trigger: "blur" }],
        unit_price: [{ validator: validate_yfdj, trigger: "change" }, { validator: validate_removePoint, trigger: "blur" }],//运费单价
        zyf: [{ validator: validate_zyf, trigger: "change" }, { validator: validate_removePoint, trigger: "blur" }]
      },

      symbolDuncha: false,//true是正,false是负
      duncha: 0,
    };
  },
  mounted() {
    this.form = this.billDetail;
    this.initialZYF = Number(this.form.zyf);
    // this.form = obj;
    this.duncha = (Number(this.form.shkg) - Number(this.form.kg)).toFixed(2);
    if (this.duncha >= 0) {
      this.symbolDuncha = true;
    } else {
      this.symbolDuncha = false;
    }
  },
  methods: {
    //费用增补，扣减
    moneyCompute(num) {
      this.initialZYF = Number(this.initialZYF);
      console.log('this.form',this.form);
      
      //沙钢集团不计算增补扣减
      if(this.form.owner_id == 46830){
        this.form.yfzb=0;
        this.form.yfkj=0;
        return;
      }

      if (num >= this.initialZYF) {
        //增补
        this.form.yfzb = (num - this.initialZYF).toFixed(2);
        this.form.yfkj = 0;
      } else {
        //扣减
        this.form.yfkj = (this.initialZYF - num).toFixed(2);
        this.form.yfzb = 0;
      }
    },
    handleAvatarSuccess(res, file, type) {
      if (res.code == 200) {
        this.form[type] = res.data.url;
      }
    },
    async verify() {
      if (Number(this.form.pay_money) >= Number(this.form.zyf)) {
        this.$message.error('总运费不得低于预支付运费!');
        return
      }
      let {
        yund_id,
        shkg,
        fhkg,
        yfzb,
        zbyy,
        yfkj,
        khyy,
        hlks,
        zyf,
        kszl,
        fhd,
        shd,
        xh_img,
        beizhu,
        unit_price
      } = this.form;
      //收货重量取修改后的值
      fhkg = this.form.kg;
      let result = await verifyWaybill({
        yund_id,
        shkg,
        fhkg,
        yfzb,
        zbyy,
        yfkj,
        khyy,
        hlks,
        zyf,
        kszl,
        fhd,
        shd,
        xh_img,
        beizhu,
        yfdj: unit_price
      });
      if (result.code == 200) {
        this.$message.success(result.msg);
        this.$emit('refreshTable');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.checkWaybill {
  .carloadStyle{
    color: rgb(240, 91, 91);
    display: block;
    margin-bottom: 10px;
    margin-left: 10px;
    text-align: center;
    font-size: 18px;
  }
  .fromArea {
    display: flex;
    flex-wrap: wrap;

    .colorRed {
      ::v-deep .el-input__inner {
        color: $theme-Danger;
      }
    }

    .el-form-item {
      width: 30%;
      margin-right: 20px;
    }

    .toolBtn {
      width: 100%;
      // flex: 1;
      display: flex;
      justify-content: center;
      margin-top: 30px;

      .btn {
        width: 100px;
      }

      ::v-deep .el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }

  ::v-deep .el-dialog__header {
    padding-top: 10px;
    padding-left: 20px;
  }

  ::v-deep .el-dialog {
    height: 60vh;

    .el-dialog__body {
      max-height: 500px;
      overflow: auto;
    }
  }
  ::v-deep .el-input-number {
    width: 100%;

    .el-input-number__decrease {
      display: none;
    }

    .el-input-number__increase {
      display: none;
    }

    .el-input__inner {
      text-align: left;
      padding-left: 15px
    }
  }
  ::v-deep .el-form-item__content {
    display: flex;

    .imgTool {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;

      .btn {
        width: 80px;
      }

      .t1 {
        margin-left: 10px;
        color: $theme-Danger;
      }
    }

    .el-select {
      width: 100%;
    }

    .el-input {
      width: 100%;
    }

    .el-button {
      margin-left: 10px;
      background-color: $theme-primary;
      color: #fff;
      border: none;
      max-height: 40px;
      // border-radius: 20px;
    }
  }
}
</style>
